<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/jQuery_class_stu/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	//:text -> input type=text
	$(":text").on("focus", function(){
		//this.value="";
		var txt = $(this).val();	//value값을 조회
		alert(txt);
		$(this).val(""); //this.value="";
	});
	$("#hp").on("change", function(){
		var txt = $(this).val();
		alert("선택된 항목 : " + txt);
	});
	$("#chkbtn").on("click", function(){
		var hobbyChk = $("input[name=hobby]:checked");
		alert("선택된 개수 : " + hobbyChk.length);
		var txt="";
		/*
		for(var i=0; i<hobbyChk.length; i++){
			//txt = txt + " " + $(hobbyChk.get(i)).val(); //get(idx) : Dom node 객체
			txt = txt + " " + hobbyChk.get(i).value;
		}
		*/
		$("input[name=hobby]:checked").each(function(idx){//idx : 반복중인 index 값 - 생략가능	
			txt = txt + (idx+1) + ". " + this.value; //this -> 반복 조회된 노드 객체
		});
		/*
			jQuery.each() : 배열을 반복하기 위한 함수.
			- $(셀렉터).each
				- jQeury 객체 내의 node 수 만큼 반복하면서 매개변수로 등록한 함수를 호출
				- 함수내에서 반복 조회중인 node(요소)는 this로 접근.
			- $.each(배열, 함수);
		*/
		var arr = [1, 2, 3, 4, 5];
		var sum = 0;
		$.each(arr, function(){
			alert(sum);
			sum = sum + this;
		});
		alert(sum);
		$("#showLayer").text(txt);
	});
});
</script>
</head>
<body>
<form id="form1" name="form1" action=""	 method="post">
이름 : <input type="text" name="name" id="name"><br>
나이 : <input type="text" name="age" id="age"><br>

전화 : <select id="hp">
			<option value="010">공통</option>
			<option>011</option>
			<option>016</option>
			<option>019</option>
		</select>
		<button id="selBtn">select 체크 조회</button>
		<br>
취미 : 
영화감상 <input type="checkbox" name="hobby" value="영화감상" id="hk">
음악감상 <input type="checkbox" name="hobby"  value="음악감상">
독서 <input type="checkbox" name="hobby"  value="독서">
운동 <input type="checkbox" name="hobby"  value="운동">
<input type="button" value="체크박스조회" id="chkbtn">

</form>
선택된 체크박스 : <span id="showLayer"></span>
</body>
</html>
